<script setup lang="ts">
import CoachCard from "@/components/school/CoachCard.vue";
import MyGridItem from "@/components/school/MyGridItem.vue";
import LessonItem from "@/components/lesson/LessonItem.vue";
import {ref} from 'vue'
import type {Lesson} from "@/type/lesson";
import {useRouter} from 'vue-router'

const router = useRouter()

const images = [
  'src/assets/images/bot.png',
  'src/assets/images/jd.jpg',
  'src/assets/images/school1.jpg',
  'src/assets/images/school2.jpg',
]

const loading = ref<boolean>();
const finished = ref(false);
const list = ref<Lesson[]>([]);

const onLoad = () => {

  // 异步更新数据
  // setTimeout 仅做示例，真实场景中一般为 ajax 请求
  setTimeout(() => {
    for (let i = 0; i < 10; i++) {
      list.value.push({
        current: 2,
        id: i,
        info: '倒库、直角、S弯、侧方、斜坡',
        subject: '科目一/科目二',
        time: '2023-01-01 8:00-9:00',
        total: 10,
      });
    }
    // 加载状态结束
    loading.value = false;

    // 数据全部加载完成
    if (list.value.length >= 40) {
      finished.value = true;
    }
  }, 1000);
};

const handleClick = () => {
  console.log('click');
};
</script>

<template>
  <van-notice-bar left-icon="volume-o" text="无论我们能活多久，我们能够享受的只有无法分割的此刻，此外别无其他。"/>

  <VanSpace direction="vertical" style="width: 100%;" :size="12">
    <van-swipe class="swipe-box" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="image in images" :key="image">
        <img :src="image" alt=""/>
      </van-swipe-item>
    </van-swipe>

    <CoachCard title="我的教练"
               :name="'张三'"
               avatar="/api/images/avatar.jpg"
               :stu-num="254"
               :teaching-year="14"
               :score="4.5"
               style="margin: 0 10px;"
               @click="router.push('/personal/coach?path=/school')"/>

    <van-grid style="margin: 0 10px;">
      <MyGridItem text="驾考规则" icon="src/assets/icon/rule.svg" to="/exam/rule"/>
      <MyGridItem text="避坑指南" icon="src/assets/icon/guide.svg" to="/mis/guide"/>
      <MyGridItem text="活动报名" icon="src/assets/icon/activity.svg" to="/activity"/>
      <MyGridItem text="增值服务" icon="src/assets/icon/service.svg" to="/value-added"/>
    </van-grid>

    <van-list v-model:loading="loading" class="lesson" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <LessonItem v-for="item in list" :key="item.id"
                  :current="item.current"
                  :id="item.id"
                  :info="item.info"
                  :subject="item.subject"
                  :time="item.time"
                  :total="item.total"
                  button-text="取消预约"
                  :click="handleClick"
      />
    </van-list>
  </VanSpace>
</template>

<style scoped lang="less">
.swipe-box {
  width: 100%;
  height: 25vh;
}

.swipe-box img {
  width: 100%;
  height: 25vh;
}

.lesson {
  background-color: #fff;
  border-radius: 5px;
  margin-left: 10px;
  margin-right: 10px;
}
</style>
